package com.shenzhenai.jetpackcomposelayouts

import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.layoutId
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.ConstraintSet
import androidx.constraintlayout.compose.Dimension
import com.shenzhenai.jetpackcomposelayouts.ui.theme.DN_Compose_LearnTheme

/**
 * @author huangzehui
 * @date 1/8/2025 上午12:18 周五
 * @description 约束布局
 */

@Composable
fun ConstraintLayoutContentSample() {
    DN_Compose_LearnTheme {
        Scaffold { innerPadding ->
//            LargeLayoutContent(Modifier.padding(innerPadding))
            DecoupledConstraintLayout2(Modifier.padding(innerPadding))
        }
    }
}

@Composable
fun ConstraintLayoutContent(modifier: Modifier) {
    ConstraintLayout(modifier = modifier) {
        // 通过createRefs创建引用，ConstraintLayout中的每个元素都需要关联一个引用
        val (button, text) = createRefs()

        Button(
            onClick = { },
            // 使用Modifier.constrainAs来提供约束，引用作为它的第一个参数
            // 在Lambda表达式中指定约束规则
            modifier = Modifier.constrainAs(button) {
                // 使用linkTo指定约束，parent是ConstraintLayout的引用

                // 这里表示当前的顶部和父视图的顶部对齐
                top.linkTo(parent.top, margin = 16.dp)
            }) {
            Text(text = "Button")
        }

        Text(text = "Text", modifier = Modifier.constrainAs(text) {
            // 这里表示文案的顶部在按钮的底部下面
            top.linkTo(button.bottom, margin = 16.dp)
            // 在 ConstraintLayout 中水平居中
            centerHorizontallyTo(parent)
        })

    }
}


@Composable
fun ConstraintLayoutContent1(modifier: Modifier) {
    ConstraintLayout(modifier = modifier) {
        val (button1, button2, text) = createRefs()


        Button(onClick = {
        }, modifier = Modifier.constrainAs(button1) {
            top.linkTo(parent.top, margin = 16.dp)
        }) {
            Text(text = "Button1")
        }

        Text(text = "Text", modifier = Modifier.constrainAs(text) {
            top.linkTo(button1.bottom, margin = 16.dp)
            // 这个方法，会围绕指定的锚点(button1.end)居中
            // 这里就是围绕按钮1的最右边进行居中
            centerAround(button1.end)
        })

        // 将button1和text组合起来，建立一个屏障(barrier)
        // 其实就是将指定的几个组件组成一个整体
        val barrier = createEndBarrier(button1, text)
        Button(onClick = {}, modifier = Modifier.constrainAs(button2) {
            top.linkTo(parent.top, margin = 16.dp)
            start.linkTo(barrier)
        }) {
            Text(text = "Button2")
        }

    }
}

@Composable
fun LargeLayoutContent(modifier: Modifier) {
    ConstraintLayout(modifier = modifier) {
        val text = createRef()

        /**
         * 创建引导线，跟xml中的 GuideLine 差不多
         *
         * fraction ： 比例
         */
        val guideLine = createGuidelineFromStart(fraction = 0.5f)

        Text(
            text = "This is a very very very very very very very long text",
            modifier = Modifier.constrainAs(text) {
                // 这里指引起点是引导线的起点
                // 终点是父布局的终点
                linkTo(start = guideLine, end = parent.end)
                // 这里是让文案超过的时候，自动换行
                width = Dimension.preferredWrapContent
            })
    }
}

/**
 * 解耦 api
 */
@Composable
fun DecoupledConstraintLayout() {

    val margin = 16.dp

    ConstraintLayout {

        val (button, text) = createRefs()

        Button(onClick = {
        }, modifier = Modifier.constrainAs(button) {
            top.linkTo(parent.top, margin = margin)
        }) {
            Text(text = "Button1")
        }

        Text(text = "Text", modifier = Modifier.constrainAs(text) {
            top.linkTo(button.bottom, margin = margin)
            // 这个方法，会围绕指定的锚点(button1.end)居中
            // 这里就是围绕按钮1的最右边进行居中
            centerAround(button.end)
        })

    }
}

/**
 * 解耦 api
 */
@Composable
fun DecoupledConstraintLayout2(modifier: Modifier) {

    BoxWithConstraints(modifier = modifier) {

        val constraints = if (maxWidth < maxHeight) {
            decoupledConstraints(16.dp)
        } else {
            decoupledConstraints(160.dp)
        }

        ConstraintLayout(constraintSet = constraints) {

            Button(onClick = {
            }, modifier = Modifier.layoutId("button")) {
                Text(text = "Button1")
            }

            Text(text = "Text", modifier = Modifier.layoutId("text"))

        }
    }

}

/**
 * 获取解耦的约束集合
 */
private fun decoupledConstraints(margin: Dp): ConstraintSet {
    return ConstraintSet {
        /**
         * 使用 createRefFor 创建一个引用，后续通过 ConstraintLayout 中的 Modifier.layoutId 获取
         */
        val button = createRefFor("button")
        val text = createRefFor("text")

        // 约束 button，跟 Modifier.constrainAs(text)  是一样的
        constrain(button) {
            top.linkTo(parent.top, margin = margin)
        }

        constrain(text) {
            top.linkTo(button.bottom, margin = margin)
        }
    }
}